<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Example</title>
    <script
      type="text/javascript"
      src="https://unpkg.zhimg.com/vue@2.6.12/dist/vue.js"
    ></script>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.zhimg.com/element-ui@2.15.6/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="https://unpkg.zhimg.com/element-ui@2.15.6/lib/index.js"></script>
    <script type="text/javascript" src="/dist/tn-element-ui.js"></script>
    <style></style>
  </head>

  <body class="tn-background-normal">
    <div id="app">
      <h2>el-tab-pane</h2>
      <hr />
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth">
          <span slot="label">
            <span>定时任务补偿</span>
            <el-badge :value="tasksCount"></el-badge>
          </span>
          定时任务补偿 tasksCount：{{ tasksCount }}
          <el-button
            icon="el-icon-minus"
            circle
            @click="tasksCount--"
          ></el-button>
          <el-button
            icon="el-icon-plus"
            circle
            @click="tasksCount++"
          ></el-button>
        </el-tab-pane>
      </el-tabs>
    </div>

    <script type="text/javascript">
      var app = new Vue({
        el: '#app',
        data: {
          activeName: 'fourth',
          tasksCount: 15,
        },
        methods: {
          handleClick(tab, event) {
            console.log(tab, event)
          },
        },
      })
    </script>
  </body>
</html>
